<template>
  <el-card class="box-card"  shadow="never">
    <div class="head-container">
      <div style="margin-left: 15px">
        <el-row>
          <svg t="1710468372537" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="6034" data-spm-anchor-id="a313x.search_index.0.i1.6d973a810aYA7h" width="22" height="22" style="margin-top: 15px"><path d="M512 64A448 448 0 1 1 64 512 448 448 0 0 1 512 64m0-64a512 512 0 1 0 512 512A512 512 0 0 0 512 0z" p-id="6035" data-spm-anchor-id="a313x.search_index.0.i2.6d973a810aYA7h" class="selected" fill="#707070"></path><path d="M512 128a384 384 0 1 0 384 384 384 384 0 0 0-384-384z m192 352H544v64H704v64H544v128h-64v-128H320v-64h160v-64H320v-64h123.648l-106.624-128h83.328L512 397.952l91.648-109.952h83.328l-106.624 128H704z" p-id="6036" data-spm-anchor-id="a313x.search_index.0.i0.6d973a810aYA7h" class="selected" fill="#707070"></path></svg>
          <div style="margin-left: 8px">我的账户</div>
        </el-row>
      </div>
    </div>
    <div style="margin-top: 20px;">
      <div style="color: #909399; font-size: 15px">账户余额</div>
      <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 20px;">
        <div style="display: flex; align-items: center;">
          <span style="color: #76cb02; font-size: 50px; font-weight: bold; padding-right: 5px;">{{ remainingSum }}</span>
          <span style="color: #76cb02; font-size: 30px; margin-top: 10px">￥</span>
          <el-popover
              placement="right"
              title="账户说明"
              :width="250"
              trigger="hover"
              content="账户余额显示了您当前在钱包中的可用资金总额。
               您可以随时通过查看账户余额来了解您的财务状况，
              并确保您有足够的资金来支付账单和应急支出。请确保定期检查账户余额，并谨慎管理您的财务。">
            <template #reference>
              <div style="margin-top: 20px;margin-left: 5px">
                <el-icon color="#a1a1a1"><Warning /></el-icon></div>
            </template>
          </el-popover>
        </div>
        <button class="el-button el-button--primary" @click="recharge"
                style="font-size: 16px; padding: 20px 30px;" >
          <span class="button-text">账户充值</span>
        </button>
      </div>
      <el-divider></el-divider>
    </div>
  </el-card>
</template>
<script>
import axios from 'axios';
export default{
  name: "walletInfo",
  data() {
    return{
      remainingSum:0,

    }
  },
  methods: {
    recharge(){
      this.$emit('handleSelect',2)
    },
    /*获取账户余额*/
    async getRemainingSum() {
      try {
        const res = await axios.post('/adWallet/getRemainingSum');
        console.log('获取账户余额返回值:',res);
        if (res.data.code === 200) {
          this.remainingSum = res.data.data;
        }else{
          this.$message.error(res.data);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        this.$message.error('获取账户余额失败');
      }
    },
/* getRemainingSum(){
   axios({
     method: 'POST',
     url: `/adWallet/getRemainingSum`, // 使用模板字符串和 encodeURIComponent 编码金额以适应 URL 路径
   }).then(res => {
     // 处理响应...
     this.remainingSum = res.data.data;

     if ("WebSocket" in window) {
       var ws = new WebSocket("ws://localhost:8080/websocket");
       ws.onopen = function() {
       };
       ws.onmessage = function(evt) {
         console.log("数据已接收..." + evt)
         if (evt.data) {
          // alert("数据接受...");
         }
         ws.close();
       };
       ws.onclose = function() {

       };
     } else {
       alert("您的浏览器不支持 WebSocket!");
     }
   });
 }*/
},
mounted() {
 this.getRemainingSum();
},

}
</script>
<style scoped lang="scss">
@import "@/theme/commonCard.css";
.button-text {
  font-size: 18px; /* 在span中设置文字的大小 */
}
</style>